<!--  -->
<template>
  <div class='jingpaidanAudit'>
    <!--        头部-->
    <head-top></head-top>
    <div style="width: 100%;height: 50px;"></div>
    <div class="status">
      <div class="left">当前状态</div>
      <div class="right">{{ jinpai.status?jinpai.status:'未提交' }}</div>
    </div>
    <div class="status num">
      <div class="left">剩余次数</div>
      <div class="right">{{ jinpai.surplus }}</div>
    </div>
    <div class="settingsCon">
      <van-form @submit="onSubmit">
        <div class="formItem">
          <div class="formitemPd uploaderCon">
            <div class="leftText">
              摩卡
              <p>1.3张半身+6张全身照，(拼成9宫格凸显拍照技术)</p>
              <p>2.背景好看，照片清晰</p>
              <p>3.不允许艺术照，ai换脸，冒充他人图片，遮脸</p>
              <p>4.建议小红书参考拍照姿势</p>
              <div style="color: #2d6cfe" @click="manPop">男生模板（点击查看）</div>
              <div style="color: #2d6cfe" @click="womanPop">女生模板（点击查看）</div>
            </div>
            <div class="uploaderField">
              <van-field name="uploader">
                <template #input>
                  <div class="imgs">
                    <div class="uploadBut">
                      上传
                      <input type="file" ref="upFile" placeholder="的" @change="File()"></input>
                    </div>
                  </div>
                </template>

              </van-field>
            </div>

          </div>
          <div class="preview" ref="preview">
            <img :src="jinpai.moka"/>
<!--            <div v-if="previewFlag" class="bg"></div>-->
          </div>
        </div>
        <div class="formItem">
          <div class="formitemPd uploaderCon">
            <div class="leftText">
              自拍
              <p>1.必须本人照片，手持手写"兼职"字样</p>
              <p>2.不允许p图，图片处理过的痕迹</p>
              <p>3.手持兼职的只拍照，只是为了验证摩卡是否为本人。不会用于其他用途。</p>
              <p>4.建议小红书参考拍照姿势</p>
              <div style="color: #2d6cfe" @click="selfPop">自拍模板（点击查看）</div>
            </div>
            <div class="uploaderField">
              <van-field name="uploader">
                <template #input>
                  <div class="imgs">
                    <div class="uploadBut">
                      上传
                      <input type="file" ref="upFile2" placeholder="的" @change="File2()"></input>
                    </div>
                  </div>
                </template>

              </van-field>
            </div>

          </div>
          <div class="preview" ref="preview">
            <img :src="jinpai.selfie"/>
<!--            <div v-if="previewFlag2" class="bg"></div>-->
          </div>
        </div>
        <div style="width: 100%; height: 80px"></div>
        <div class="sub">
          <van-button round block type="info" native-type="submit" @click="submit()">提交</van-button>
        </div>
      </van-form>
    </div>
<!--    弹窗框-->
    <div class="popCon" v-show="popConFlag" @click="clickpopCon">
      <img src="../../assets/img/icon03.jpg" />
    </div>
    <div class="popCon" v-show="womanPopFlag" @click="clickwomanPop">
      <img src="../../assets/img/icon06.jpg" />
    </div>
    <div class="popCon" v-show="selfPopFlag" @click="clickselfPop">
      <img src="../../assets/img/icon01.jpg" />
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from ‘《组件路径》‘;
import headTop from "../../components/base/headTop.vue"
import comApi from "@/api/comapi"
import {Toast} from "vant";
export default {
//import引入的组件需要注入到对象中才能使用
  components: {
    headTop
  },
  data() {

    return {
      Bsieks:'',
      Bsieks2:'',
      // previewFlag:true,
      // previewFlag2:true,
      popConFlag:false,
      jinpai:{},
      selfPopFlag:false,
      womanPopFlag:false,
    };
  },
//监听属性 类似于data概念
  computed: {
  },
//监控data中的数据变化
  watch: {},

  methods: {
    jingpaiGetLastStatus(){
      comApi.jingpaiGetLast().then(res=>{
        this.jinpai =  res.data.record
      })
    },
    File() {
      let file = this.$refs.upFile.files[0];
      let formData = new FormData();
      formData.append("file", file)
      comApi.fileUpload(formData).then(res=>{
        this.jinpai.moka = res.data
        // this.previewFlag = false
      })
    },
    File2() {
      let file = this.$refs.upFile2.files[0];
      let formData = new FormData();
      formData.append("file", file)
      comApi.fileUpload(formData).then(res=>{
        this.jinpai.selfie = res.data
        // this.previewFlag2 = false
      })
    },
    submit(){
      if(!this.jinpai.moka){
        Toast('请上传摩卡照片')
        return
      }
      if(!this.jinpai.selfie){
        Toast('请上传自拍照片')
        return
      }
      let json ={moka:this.jinpai.moka,selfie:this.jinpai.selfie}
      comApi.submitJingpai(json).then(res=>{
        Toast(res.message)
        this.jingpaiGetLastStatus()
      })

    },
    manPop(){
      this.popConFlag = true
    },

    womanPop(){
      this.womanPopFlag = true
    },
    selfPop(){
      this.selfPopFlag = true
    },

    clickpopCon(){//男生自拍模板弹窗
      this.popConFlag = false
    },
    clickwomanPop(){//女生自拍模板弹窗
              this.womanPopFlag=false
    },
    clickselfPop(){//自拍模板弹窗
      this.selfPopFlag=false
    },
    onSubmit(values) {
      console.log('submit', values);
    },
  },

  created() {
    this.jingpaiGetLastStatus()
  },

  mounted() {

  },
  beforeCreate() {
  },
  beforeMount() {
  },
  beforeUpdate() {
  },
  updated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  activated() {
  }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
  .jingpaidanAudit{
    width: 100%;
    min-height: 100%;
    background: #f8f8f8;
  }
  .status{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
      font-size: 16px;
      font-weight: bold;
      padding: 10px;
    }
    .right{
      font-size: 16px;
      padding: 10px;
      color: #fc4052;
    }
  }
  .num{
    border-bottom: 5px solid #f0eff4;
    border-top: 5px solid #f0eff4;
  }
  .settingsCon{
    width: 100%;
    .van-cell{
      background: #f8f8f8;
    }
    .formItem{
      width: 100%;
      .uploaderCon{
        border-bottom:1px solid #e5e5e6;
        font-size: 14px;
        display: flex;
        align-items: center;
        padding:10px;
        /deep/.van-field__label{
          color: #9e989f !important;
        }
        .leftText{
          color: #131413;
        }
        .uploaderField{
          flex: 1;
          position: relative;
          /deep/.van-cell{
            padding: 0px;
          }
          /deep/.van-cell::after{
            border: none;
          }
          /deep/.van-field__control--custom{
            justify-content: flex-end;
          }
          .imgs{
            .uploadBut {
              width: 50px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              padding: 0 20px;
              margin: 0 0 15px 30px;
              /*color: white;*/
              background: #f8f5be;
              border-radius: 20px;
              position: relative;

              input {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 2px;
                left: -10px;
                opacity: 0;
              }

            }

          }

        }
      }
      .preview {
        width: 320px;
        height: 240px;
        position: relative;
        top: 0;
        left: 50%;
        margin-left: -160px;
        img {
          width: 320px;
          height: 240px;
          border: none;
          outline: none;
        }

        .bg {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #f8f8f8;
        }

      }
    }
    .sub {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #ffffff;
      padding-bottom: 10px;

      .van-button {
        width: 95%;
        margin: 0 auto;
        background: #f8f5be;
        border: none;
        color: black;
      }
    }
  }
  .popCon{
    width: 100%;
    min-height: 100%;
   background: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10001;
    img{
      width: 95%;
      height: 600px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -300px;
      margin-left: -47.5%;

    }
  }
</style>
